<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<link rel="stylesheet" href="../../icon/iconfont.css">
<link rel="stylesheet" type="text/css" href="../../css/api.css" />
<link rel="stylesheet" type="text/css" href="../../css/style.css" />
<link rel="stylesheet" href="../../css/aui.css">
<style>
  a{
    text-decoration:none;
     out-line: none;
     color: rgb(101, 101, 101);
  }
  i{
    font-style: normal;
  }
  html,
  body{
    height: 100%;
  }
  body{
    position: relative;
  }
  .giftBag{
    height: 100%;
    background-color: #f1f1f1
  }
  header{
    background-color: #fff;
    width: 100%;
    position: fixed;
    padding: 1.6rem 0.8rem 0.5rem 0.8rem;
  }
  header span:nth-of-type(1){
    font-size: 1rem
  }
  header span:nth-of-type(2){
    font-size: 1rem;
  }
  /*卡券区域*/
  .content{
    padding: 4.5rem 0.8rem 0 0.8rem;
    height: 100%;
    background-color: #f1f1f1
  }
  .item{
    height: 4rem;
    background-size: 100%;
    background-repeat: no-repeat;
    background-image: url(../../image/background.png);
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.7rem
  }
  .item .left{
    padding-left: 0.6rem;
    margin-top: 0.1rem;
  }
  .item .left .head{
    color: #fff;
    font-size: 0.6rem;
  }
  .item .left .cont{
    color: #000;
    font-size: 1rem;
    margin-top: 0.1rem
  }
  .item .left .foot{
    color: #c0c0c0;
    font-size: 0.6rem;
  }
  .item .right{
    width: 5.6rem;
    height: 3.6rem;
    color: #fff;
    text-align: center;
    margin-top: 0.7rem
  }
  .item .right .price{
    font-size: 1.3rem;
  }
  .item .right .price text{
    font-size: 0.8rem
  }
  .item .right .manjian{
    font-size: 0.6rem;
    margin-top: -0.2rem
  }
</style>
<script type="text/javascript" src="../../lib/zepto.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/dns.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../lib/artTemplate/template.js"></script>
<body>
  <div class="giftBag">
    <!-- 头部 -->
    <header>
      <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
      <span>卡包查看</span>
    </header>
    <!-- 卡券区域 -->
    <div class="content" id="content">

    </div>

</body>
<script type="text/html" id="getcouponBag">
  {{each items as value index}}
  <div class="item">
    <div class="left">
      <div class="head">{{value.m_title}}</div>
      <div class="cont">{{value.title}}</div>
      <div class="foot">{{value.limit_time_type == 1 ? '有效期：'+value.day : '有效期：'+value.start_time+ '至' +value.end_time}}</div>
    </div>
    <div class="right">
      <div class="price">{{value.face_value}}<text>元</text></div>
      <div class="manjian">满{{value.use_condition}}元可用</div>
    </div>
  </div>
  {{/each}}
</script>
<script type="text/javascript">
  apiready = function() {
    var index = api.pageParam.index
    getCouponList(index);
  }
  function getCouponList(index) {
    var token = localStorage.getItem("token");
    $.ajax({
      type:"get",
      dataType:'json',
      beforeSend: function(request) {
          request.setRequestHeader("token", token);
      },
      url:dns+"coupon/bag",
      success:function (res) {
        // console.log(JSON.stringify(res));
        if(res.status == 1){
          var list = [];
          res.data.forEach(function(val,ind) {
            if(index == ind){
              val.list.forEach(function(val2,ind2) {
                list.push(val2)
              })
            }
          })
          var html = template("getcouponBag",{"items":list});
          $("#content").html(html);
        }

        // if(res2.status == 1){
        //   var html = template("getcouponBag",{"items":res2.data});
        //   $("#content").append(html);
        // }
      }
    })
  }
</script>
</html>
